<template>
	<view>
		<view class="bg"></view>
		<transition name="fadeScale"><uni-notice-bar single="true" :text="Tiptext" class="tip" v-if="showTip"></uni-notice-bar></transition>
		<view class="content">
			<search :searchAnimate="searchAnimate" 
			:searchList="BlogListEight"
			class="searchBlog"
			@chooseBlogForSearch="chooseBlogForSearch"
			></search>
			<view class="search-input">
				<input type="text" 
				@focus="searchEightBlogItem" 
				@blur="cancelSearchBlog" 
				@input="searchBlogFromInput"
				@confirm="searchBlogBySearchText"
				id="search-blog" 
				placeholder="搜索你想了解的博客" 
				v-model="searchText" />
				<label for="search-blog" class="iconfont iconsousuo search" @tap="searchBlogBySearchText"></label>
			</view>
			<swiper :indicator-dots="true" autoplay="true" :interval="3000" :duration="1000" class="swiper">
				<swiper-item v-for="(item, index) in swiperItem" :key="item.way">
					<image :src="item.img" mode="scaleToFill" class="swiperImage" @click="selectBlogFromWay(item.way)"></image>
				</swiper-item>
			</swiper>
			<index-item
				v-for="(item, index) in pagenationContent"
				:key="item.id"
				:id="item.id"
				:text="item.content"
				:seeNum="item.seeNum"
				:title="item.title"
				:goodNum="item.goodNum"
				:way="item.way"
				:time="item.time"
				@failgood="failgood"
			></index-item>
			<view class="pagenation" v-if="pagenationContent>pageSize">
				<uni-pagination show-icon="true" :total="allPageSize" :current="currentPageNum" 
				:pageSize="pageSize" @change="changePagenation"></uni-pagination>
			</view>
		</view>
	</view>
</template>

<script>
import indexItem from './indexItem.vue';
import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue';
import search from '../../components/searchBar/search.vue';
import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
export default {
	components: {
		indexItem,
		uniNoticeBar,
		search,
		uniPagination
	},
	data() {
		return {
			searchAnimate: false,
			Tiptext: '',
			pageSize: 4,
			currentPageNum: 1,
			showTip: false,
			blogList: [],
			blogListSearch:[],
			allBlogList: [],
			searchText: '',
			swiperItem: [
				{ way: 'js', img: '../../static/img/js.jpg' },
				{ way: 'css', img: '../../static/img/css.jpg' },
				{ way: '其他', img: '../../static/img/learn.jpg' },
				{ way: 'node', img: '../../static/img/node.jpg' },
				{ way: '随笔', img: '../../static/img/suibi.jpg' },
				{ way: 'vue', img: '../../static/img/vue.jpg' }
			]
		};
	},
	onLoad() {},
	created() {
		this.getAllBlog();
	},
	onPullDownRefresh() {
		setTimeout(()=>{
			uni.reLaunch({
				url:"/pages/index/index"
			})
		},500)
	},
	computed: {
		pagenationContent() {
			return this.blogList.filter((item, index) => {
				return index > (this.currentPageNum - 1) * this.pageSize - 1 && 
				index <= (this.currentPageNum - 1) * this.pageSize - 1 + this.pageSize;
			});
		},
		allPageSize() {
			return this.blogList.length;
		},
		BlogListEight() {
			return this.blogListSearch.filter((item, index) => {
				return index <= 7;
			});
		}
	},
	methods: {
		selectBlogFromWay(way){
			console.log(way)
			uni.request({
				method:"get",
				url:"https://www.ttzxh.icu:443/api/blog/list",
				data:{
					way:way
				},
				success: (res) => {
					console.log(res)
					if(res.data.error===-1){
						this.blogList = res.data.data
					}else{
						this.blogList = []
					}
				},
				fail: () => {
					this.blogList = this.allBlogList
				}
			})
		},
		searchBlogFromInput(){
			if(this.searchText!==""){
				uni.request({
					method:"get",
					url:"https://www.ttzxh.icu:443/api/blog/list",
					data:{
						title:this.searchText
					},
					success: (res) => {
						if(res.data.error===-1){
							this.blogListSearch = res.data.data
						}else{
							this.blogListSearch = [{title:"没有找到呀O(∩_∩)O"}]
						}
					},
					fail: () => {
						this.blogListSearch = [{title:"没有找到呀O(∩_∩)O"}]
					}
				})
			}else{
				this.blogListSearch = this.allBlogList
			}
		},
		chooseBlogForSearch(item){
			this.searchText = item.title
			this.searchBlogBySearchText()
		},
		changePagenation(current) {
			console.log(current);
			this.currentPageNum=current.type==="next"?this.currentPageNum+1:this.currentPageNum-1
		},
		cancelSearchBlog() {
			this.searchAnimate = false;
		},
		searchEightBlogItem() {
			this.searchAnimate = true;
			this.blogListSearch = this.allBlogList
		},
		failgood() {
			this.showTip = true;
			this.Tiptext = '这...点赞都失败了...';
			setTimeout(() => {
				this.showTip = false;
			}, 2000);
		},
		searchBlogBySearchText() {
			if(this.searchText!==""){
				uni.request({
					method:"get",
					url:"https://www.ttzxh.icu:443/api/blog/list",
					data:{
						title:this.searchText
					},
					success: (res) => {
						if(res.data.error===-1){
							this.searchText = ""
							this.currentPageNum = 1
							this.blogList = res.data.data
						}else{
							this.searchText = ""
							this.blogList = this.allBlogList
						}
					},
					fail: () => {
						this.searchText = ""
						this.blogList = this.allBlogList
					}
				})
			}else{
				this.blogList = this.allBlogList
			}
		},
		getAllBlog() {
			uni.request({
				url: 'https://www.ttzxh.icu:443/api/blog/list',
				success: res => {
					console.log(res)
					let contain = res.data.error === -1 ? res.data.data : [];
					this.blogList = contain;
					this.allBlogList = contain;
					this.blogListSearch = contain;
					uni.setStorage({
						key: 'allBlogList',
						data: contain
					});
				},
				fail: () => {
					this.showTip = true;
					this.Tiptext = '获取数据失败';
					setTimeout(() => {
						this.showTip = false;
					}, 2000);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import url('../../components/css/comment.css');
@import url('../../components/css/animate.css');
.bg {
	opacity: 0.2;
	position: fixed;
	top: 0px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: url('../../static/img/huijin.jpg');
	background-color: #e5e5e5;
	background-size: 100% 100%;
	z-index: -1;
}
.searchBlog{
	left: 25px;
	width: 650upx;
}
.content {
	box-sizing: border-box;
	.swiper {
		opacity: 0.8;
		margin-top: 85px;
		height: 350upx;
		.swiperImage {
			width: 750upx;
			height: 100%;
		}
	}
	.search-input {
		position: fixed;
		z-index: 9;
		top: 30px;
		padding: 15px 0;
		display: flex;
		width: 100%;
		height: 30px;
		background-color: transparent;
		.search {
			margin: 0 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 40px;
			height: 100%;
			border: 1px solid $uni-border-color;
			border-radius: 50%;
			background-color: rgba($color: #fff, $alpha: 0.7);
			transition: all 0.2s;
			&:active {
				background-color: $uni-bg-color-blue;
				color: #fff;
			}
		}
		#search-blog {
			background-color: rgba($color: #fff, $alpha: 0.7);
			margin: 0 5px;
			padding: 0 25px;
			width: 700upx;
			height: 100%;
			border: 1px solid $uni-border-color;
			border-radius: 40px;
		}
	}
}
.pagenation {
	padding-bottom: 10px;
	display: flex;
	justify-content: center;
}
</style>
